<template>
  <a-card style="height: 100%">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="初始数据">
        <a-row :span="1" align="middle" type="flex" justify="space-around">
          <a-col :span="24">
            <json-viewer
              v-model="config.testData"
              current-mode="code"
              language="zh-CN"
              style="height: 560px"
            />
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" tab="模型表单配置">
        <json-viewer
          v-model="config.formConfig.model"
          current-mode="code"
          language="zh-CN"
          style="height: 560px"
        />
      </a-tab-pane>
      <a-tab-pane key="3" tab="应用表单配置">
        <json-viewer
          v-model="config.formConfig.module"
          current-mode="code"
          language="zh-CN"
          style="height: 560px"
        />
      </a-tab-pane>
      <a-tab-pane key="4" tab="操作配置">
        <json-viewer v-model="config.operatorConfig" style="height: 560px" />
      </a-tab-pane>
      <a-tab-pane key="5" tab="数据渲染配置">
        <json-viewer
          v-model="config.renderConfig"
          current-mode="code"
          language="zh-CN"
          style="height: 560px"
        />
      </a-tab-pane>
    </a-tabs>
    <a-row type="flex" justify="end" style="margin-top: 20px">
      <a-space>
        <s-button
          v-if="activeKey == '2'"
          type="primary"
          icon="eye-outlined"
          @click="$refs.formPreview.open()"
          >预览</s-button
        >
        <s-button
          v-if="activeKey == '3'"
          type="primary"
          icon="eye-outlined"
          @click="$refs.modulePreview.open()"
          >预览</s-button
        >
        <s-button
          v-if="activeKey == '5'"
          type="primary"
          icon="eye-outlined"
          @click="$refs.renderPreview.open()"
          >预览</s-button
        >
        <s-button v-if="authorize.update" type="primary" icon="save-outlined" @click="save"
          >保存</s-button
        >
      </a-space>
    </a-row>
    <preview
      ref="formPreview"
      :config="config.formConfig.model.form"
      :form-value="config.testData.model"
    />
    <preview
      ref="modulePreview"
      :config="config.formConfig.module.form"
      :form-value="config.testData.module"
    />
    <render-preview ref="renderPreview" :config="config" />
  </a-card>
</template>

<script>
import Preview from './preview/index.vue'
import RenderPreview from './renderPreview/index.vue'
import JsonViewer from '@/components/JsonViewer/index.vue'
export default {
  name: 'CodeConfig',
  components: { JsonViewer, Preview, RenderPreview },
  data() {
    return {
      activeKey: '1',
      config: {
        testData: {
          model: {},
          module: {}
        },
        formConfig: {
          model: {
            list: [],
            form: []
          },
          module: {
            list: [],
            form: []
          }
        },
        renderConfig: undefined,
        operatorConfig: undefined
      }
    }
  },
  authorize: '/code/config/permissionList',
  created() {
    this.$api.GET('/code/config/selectOne').then((res) => {
      this.config.testData.model = res.data?.testData?.model
      this.config.testData.module = res.data?.testData?.module
      this.config.renderConfig = res.data?.renderConfig
      this.config.operatorConfig = res.data?.operatorConfig
      this.config.formConfig.model = res.data?.formConfig?.model
      this.config.formConfig.module = res.data?.formConfig?.module
    })
  },
  methods: {
    save() {
      this.$loading(true)
      this.$api
        .PUT('/code/config/update', this.config)
        .then((res) => {
          this.$message.info(res.msg)
          this.$loading(false)
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less">
div.jsoneditor-menu a {
  visibility: hidden;
}
.jsoneditor-vue {
  height: 500px;
}
</style>
